<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>create view</title>

    <link rel="stylesheet" href="/css/jquery-ui.css" />
    <link rel="stylesheet" href="/css/pqselect.dev.css" />
    <script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="/js/ag-grid-new.js"></script>
    <script type="text/javascript" src="/js/view.js"></script>
    <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/js/pqselect.dev.js"></script>

</head>
<body>
<style type="text/css">
    .overlay{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        z-index: 9998;
        display: none;
    }
    .overlay-content{
        width: 600px;
        height: 400px;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        margin: auto;
        background: #fff;
    }
    .overlay-bottom{
        width: 100%;
        text-align: center;
    }
</style>

<div id="mytree" style="height: 20px; width:98%; float: left;">
    <div id = "div_main_table" style="display: inline"><span>main table:</span>
    <select name="main_table" id="main_table" >
        <option value="default">---请选择---</option>
    </select>
        <button id="submitColumnsToGrid" >submit</button>
        <input type="text" name="txt_view_name" />
        <button id="createView" >create view</button>
        <button class="alert">add filters</button>
    </div>
</div>
<div id = "div-search" style="width:98%; float: left;" ></div>
<div id = "div_grid" style="height: 400px; width: 98%; float: left;" class="ag-fresh">
    <div id="myGrid" style="height: 350px; width: 100%; float: left;" class="ag-fresh"></div>
</div>
<div class="overlay">
    <div class="overlay-content">
        <div>
            <button class="overlay-close">close</button>
        </div>
        <div class="overlay-center">
            <select name="overlay-center-column" id="overlay-center-column-id" >
                <option value="default">---请选择---</option>
            </select>
            <select name="overlay-center-opts" id="overlay-center-opts-id"  >
                <option value="default">---请选择---</option>
                <option value="equal" >等于</option>
                <option value="in" >包含</option>
                <option value="date" >日期</option>
                <!--<option value="between">区间</option>-->
            </select>

            <select id="overlay-center-sub-id-0" multiple=multiple style="margin: 20px;width:150px;">
            </select>
            <!--<div class="overlay-center-sub">-->
                <input type="text" class="overlay-center-sub-1">
                <input type="checkbox" class="overlay-center-sub-2">
                <input type="date" class="overlay-center-sub-3">
                <!--&lt;!&ndash;<input type="text" class="overlay-center-sub-4">&ndash;&gt;-->
            <!--</div>-->
        </div>
        <div class="overlay-bottom">
        <button class="overlay-submit">submit</button>
        </div>
    </div>
</div>
</body>
</html>